<template>
  <div
    v-if="visible"
    :class="[
      'drawer-comp',
      `drawer-comp_${direction}`,
      `drawer-${drawer ? 'show' : 'hide'}-${direction}`,
    ]"
    v-bind="$attrs"
    :style="{
      [direction] : 0,
      width,
      ...styles
    }">
    <div class="drawer-comp-container">
      <div :class="['btn-content', `btn-content_${direction}`]">
        <slot
          v-if="$slots.btn"
          name="btn"
          class="drawer-comp-btn"
          @click="handleBtnClick">
        </slot>
        <div v-else :class="['drawer-comp-btn', direction]" @click="handleBtnClick">
          <el-canvas
            @mouseleave="handleMouseLeave"
            @mouseenter="handleMouseenter"
            :width="35"
            :height="110"
            :initFn="canvasInit">
          </el-canvas>
          <i :class="['iconfont', 'iconzuo', `iconzuo_${direction}`]"></i>
        </div>
      </div>
      <div class="drawer-comp-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import ElCanvas from '@/components/public/canvas';

export default {
  name: 'drawerComp',
  props: {
    // 是否展示菜单
    visible: {
      type: Boolean,
      default: true
    },
    // 菜单方向显示
    direction: {
      type: String,
      default: 'right'
    },
    // 菜单宽度大小
    width: {
      type: String,
      default: '25%'
    },
    // 自定义样式
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 展示，隐藏控制
      drawer: true
    };
  },
  methods: {
    /**
     * 菜单按钮点击事件
     */
    handleBtnClick() {
      this.trigger();
      this.$emit('on-off', this.drawer);
    },
    /**
     * 菜单展开、关闭
     * @apram value {Boolean} 手动调用
     */
    trigger(value) {
      this.drawer = typeof value === 'boolean' ? value : !this.drawer;
    },
    /**
     * 菜单展开、关闭
     * @param canvasEl: canvas元素
     * @param colorStr: 设置样式
     */
    canvasInit(canvasEl, colorStr) {
      const ctx = canvasEl.getContext('2d');
      ctx.clearRect(0, 0, 200, 200);
      const gradient = ctx.createLinearGradient(30, 0, 0, 0);
      gradient.addColorStop(0, 'rgb(22, 29, 68)');
      gradient.addColorStop(0.7, 'rgba(83, 91, 115, 0.8)');
      gradient.addColorStop(1, 'transparent');
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.bezierCurveTo(5, 25, 30, 25, 30, 40);
      ctx.lineTo(30, 70);
      ctx.bezierCurveTo(30, 85, 5, 85, 0, 110);
      ctx.lineWidth = 3;
      ctx.strokeStyle = '#b9c3f4';
      ctx.shadowColor = colorStr || 'transparent';
      ctx.shadowBlur = 3;
      ctx.stroke();
      ctx.fillStyle = gradient;
      ctx.fill();
    },
    handleMouseenter(canvasEl) {
      this.canvasInit(canvasEl, 'rgba(85, 201, 246, .7)');
    },
    handleMouseLeave(canvasEl) {
      this.canvasInit(canvasEl);
    }
  },
  components: {
    ElCanvas
  }
};
</script>

<style scoped lang="scss">
.drawer-comp {
  position: absolute;
  z-index: 9;
  height: 100%;
  background: transparent;
  &_left {
    background: linear-gradient(to right, #151c43, rgba(9, 8, 50, 1) 20%, rgba(28, 34, 68, .8) 50%, rgba(27, 38, 75, .5) 80%, transparent);

  }
  &_right {
    background: linear-gradient(to left, #151c43, rgba(9, 8, 50, 1) 20%, rgba(28, 34, 68, .8) 50%, rgba(27, 38, 75, .5) 80%, transparent);

  }
  &.drawer-show-right {
    animation: drawer-in .5s;
    animation-fill-mode: forwards;
    .iconzuo {
      animation: drawer-btn-right-in .5s;
      animation-fill-mode: forwards;
    }
  }
  &.drawer-hide-right {
    animation: drawer-out .5s;
    animation-fill-mode: forwards;
    .iconzuo {
      animation: drawer-btn-right-out .5s;
      animation-fill-mode: forwards;
    }
  }
  &.drawer-show-left {
    animation: drawer-in-left .5s;
    animation-fill-mode: forwards;
    .iconzuo {
      animation: drawer-btn-left-out .5s;
      animation-fill-mode: forwards;
    }
  }
  &.drawer-hide-left {
    animation: drawer-out-left .5s;
    animation-fill-mode: forwards;
    .iconzuo {
      animation: drawer-btn-left-in .5s;
      animation-fill-mode: forwards;
    }
  }
  .drawer-comp-container {
    width: 100%;
    height: 100%;
    .btn-content {
      position: absolute;
      top: calc(50% - 60px);
      &_left {
        right: -40px;
      }
      &_right {
        left: -40px;
      }
    }
  }
  .drawer-comp-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  @keyframes drawer-in {
    0% {
      transform: translate(100%);
    }
    100% {
      transform: translate(0);
    }
  }
  @keyframes drawer-out {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(100%);
    }
  }
  @keyframes drawer-in-left {
    0% {
      transform: translate(-100%);
    }
    100% {
      transform: translate(0);
    }
  }
  @keyframes drawer-out-left {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(-100%);
    }
  }
  .drawer-comp-btn {
    position: relative;
    cursor: pointer;
    .iconzuo {
      display: block;
      text-align: center;
      font-size: 17px;
      color: #fff;
      position: absolute;
      top: calc(50% - 12px);
      left: calc(50% - 10px);
      pointer-events: none;
    }
    &.right {
      transform: rotateY(-180deg);
    }
    &:hover .iconzuo {
      color: rgb(85, 201, 246);
    }
  }

  @keyframes drawer-btn-left-in {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-180deg);
    }
  }

  @keyframes drawer-btn-left-out {
    0% {
      transform: rotate(-180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes drawer-btn-right-in {
    0% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes drawer-btn-right-out {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(180deg);
    }
  }
}
</style>
